<template>
	<!-- <z-paging ref="paging" v-model="dataList" @query="queryList">
		<template #top>
			顶部
		</template>
		<view class="item" v-for="(item,index) in dataList" :key="index">
			<view class="item-title">{{item.title}}</view>
		</view>
	</z-paging> -->

	<!-- 下楼进入二楼建议在pages.json中隐藏系统导航栏，使用自定义导航栏，避免二楼被系统导航栏盖住 -->
	<z-paging ref="paging" v-model="dataList" refresher-f2-enabled @query="queryList">
		<!-- 自定义松手显示二楼view（非必须，可根据具体需求定制） -->
		<template #refresherF2>
			<view class="refresher-f2-view">
				<text class="refresher-f2-view-text">松手可以进入二楼哦 (*╹▽╹*)</text>
			</view>
		</template>
		<!-- 自定义需要插入二楼的view，建议将插入二楼的view设置高度100%以铺满容器高度 -->
		<template #f2>
			二楼也没


			<button @tap="closeF2">关闭二楼</button>
		</template>
		<!-- 页面内容 -->
	</z-paging>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import store from '@/store/index.js';

	import http from "@/common/api/index.js"
	const paging = ref(null)
	// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
	const dataList = ref([])

	console.log(store.state)

	// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
	const queryList = (pageNo, pageSize) => {
		// 此处请求仅为演示，请替换为自己项目中的请求
		http.homePageList({
			pageNo,
			pageSize
		}).then(res => {
			// 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
			paging.value.complete([{
				title: 1
			}, {
				title: 2
			}]);
		}).catch(res => {
			// 如果请求失败写paging.value.complete(false);
			// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
			// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
			paging.value.complete(false);
		})
	}

	const closeF2 = () => {
		paging?.value.closeF2();
	}
</script>